
<template>
  <div>
    <table-ext :columns="columns" :searchForm="searchForm" :config="config" ref="tableExt">
       <template slot="table-action">
          <el-button type="primary" icon="el-icon-plus" @click="addExpert">新增</el-button>
       </template>
    </table-ext>
    <!-- 新增&修改弹框 -->
    <el-dialog :title="dialogUpdate?'修改':'新增' + config.title" :visible.sync="dialogFormVisible">
      <el-form :model="addOrUpdateForm" :rules="rules" ref="addOrUpdateForm" label-width="100px">
         <el-form-item label="专家类别" prop="evaluationType">
            <template>
              <el-radio-group v-model="addOrUpdateForm.evaluationType">
                <el-radio-button v-for="evaluationType in evaluationTypeOptions" :label="evaluationType.id" :key="evaluationType.id">{{evaluationType.remarks}}</el-radio-button>
              </el-radio-group>
            </template>
        </el-form-item>
        <el-form-item label="标签" prop="tags">
            <template>
              <el-checkbox-group v-model="addOrUpdateForm.tags">
                <el-checkbox v-for="tag in tagOptions" :label="tag[0]" :key="tag[0]">{{tag[1]}}</el-checkbox>
              </el-checkbox-group>
            </template>
        </el-form-item>
        <el-form-item label="评估岗位：" prop="sysStationName">
          <select-station v-model="addOrUpdateForm.sysStationName" :name="'stationName'" ref="selectStation" @on-selection-data="getRowData"></select-station >
        </el-form-item>
        <el-form-item label="公司:" prop="companyName" style="margin-bottom: 22px">
          <el-input v-model="addOrUpdateForm.companyName" readonly></el-input>
        </el-form-item>
        <el-form-item label="部门:" prop="deptName" style="margin-bottom: 22px">
          <el-input v-model="addOrUpdateForm.deptName" readonly></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="resetForm('addOrUpdateForm'); dialogFormVisible = false">取 消</el-button>
        <el-button type="info" @click="resetForm('addOrUpdateForm')" v-if="!dialogUpdate">重置</el-button>
        <el-button type="primary" @click="addOrUpdate('addOrUpdateForm')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
   import TableExt from '@/components/common/table-ext/table-ext.vue';
   import SelectStation from '@/components/common/select-ext/select-station.vue';  
   import structureBtn from '@/components/common/table-ext/structureBtn.js';  
   export default {
    // 引入自定义表格组件
    components:{
      'table-ext': TableExt,
       SelectStation
    },
    data() {
      return {
        // 新增、修改专家的标签选项
        tagOptions: [['1','现场审核'], ['2','评标']],
        // 修改专家的标签默认选中
        checkTags: ['1'],
        // 新增、修改专家的专家类别
        evaluationTypeOptions:[],
        // 弹框显示控制
        dialogFormVisible: false,
        // 新增|修改弹框控制
        dialogUpdate: false,
        // 公司下拉查询
        companys:[],
        // 弹框属性
        addOrUpdateForm: {
          evaluationType:'',
          tag: '',
          tags: [], // 方便修改记录时选中标签
          companyId:'',
          companyCode:'',
          companyName: '',
          deptName: '',
          sysStationId:'',
          sysStationName:''
        },
        // 验证规则
        rules: {
          // sysStationName: [
          //   { required: true, message: '请选择岗位', trigger: 'blur' }
          // ],
          tag: [
            { required: true, message: '请选择标签', trigger: 'change' }
          ]
        },
        config:{ // 页面共通配置
          title: '专家库', //页面标题
          isPage: true, //是否分页
          isNo: false, //是否显示序号
          selection: true, //是否显示复选框
          crudMapping:{ // CRUD方法
            query:{
              url: this.lib.config.host.masterData + '/system/expert/query'
            },
            delete: {
              url: this.lib.config.host.masterData + '/system/expert/delete'
            }
          }
        },
        // 查询表单配置
        searchForm:[{
          label: '公司:',
          key: 'companyId',
          type: 'select',
          dict: {
            url: this.lib.config.host.masterData + '/system/cmpMgt/company/getAll',
            method: 'post',
            label: 'companyName',
            value: 'id'
          }
        },{
          label: '部门:',
          key: 'deptName',
          type: 'input'
        },{
          label: '标签:',
          key: 'tag',
          // 下拉多选
          type: 'multipleSelect',
          dict: [{
            value: '1',
            label: '现场审核'
          },{
            value: '2',
            label: '评标'
          }]
        }],
        // 表格列定义
        columns:[{
          width:'100',
          label: '操作', // 表格header
          align : 'center',
          render: (h, params) => { // 动态渲染，click事件示例
            let _this = this;
            let list = structureBtn(h, [{
              text: '编辑',
              // 是否隐藏
              hidden: !this.lib.common.hasOpt('0010601'), 
              click:()=>{  
                _this.dialogUpdate = true;
                _this.dialogFormVisible = true;
                this.$nextTick(()=>{
                  _this.resetForm('addOrUpdateForm');
                  _this.addOrUpdateForm = Object.assign({}, _this.addOrUpdateForm, params.row);
                  // tag = "1,2"
                  _this.addOrUpdateForm.tags = params.row.tag.split(',');
                  _this.sysStationName=params.row.sysStationName
                }) 
              }
            }]);
            return h('div',{}, list);
          }
        },{
          label: '专家类别',
          key: 'evaluationTypeName',
          align : 'center',
          width : '200px'
        },{
          label: '标签',
          key: 'tag',
          align : 'center',
          width : '150px', 
          render:(createElement, params)=>{
            const tags = params.row.tag.split(',');
            let tagStr = '';
            tags.forEach(item => {
              if(item == '1'){
                tagStr += '现场审核,';
              } else if(item == '2'){
                tagStr += '评标,';
              }
            });
            return createElement('div',
              tagStr.substring(0, tagStr.length - 1)
            );
          }
        },{
          label: '公司编码',
          key: 'companyCode',
          align : 'center',
          width : '150px'
        },{
          label: '公司名称',
          key: 'companyName',
          align : 'center',
          width : '300px'
        },{
          label: '部门',
          key: 'deptName',
          align : 'center',
          width : '400px'
        }],
        sysStationName:''
      };
    },
    mounted(){ // VUE页面渲染之后调用的方法
      this.initData();
    },
    methods: {
      // 初始化页面数据
       initData(){
        this.getDicData('EXPERT').then((data)=>{ // 获取专家库数据字典信息
          this.evaluationTypeOptions = data;
        });
       },
       // 触发新增|修改
       addOrUpdate(formName) {
        this.addOrUpdateForm.tag = this.addOrUpdateForm.tags.join(',');
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.axios.post(this.lib.config.host.masterData + '/system/expert/saveOrUpdate', this.addOrUpdateForm).then((res)=>{
                this.$refs['tableExt'].refreshTable();
                this.dialogFormVisible = false;
            }).catch((e)=>{
              this.$message({
                type: 'info',
                message: '失败！'
              });
            });
          } else {
            return false;
          }
        });
      },
      // 新增专家
      addExpert(){
        this.dialogUpdate = false;
        this.dialogFormVisible = true;
        this.$nextTick(()=>{
          this.resetForm('addOrUpdateForm');
        });
      },
      // 批量删除
      batchDelete(){
        let checkRows = this.$refs['tableExt'].multipleSelection;
        checkRows.map(item =>{
          this.checkIds.push(item.id);
        });
        this.securityPost(this.lib.config.host.masterData + "/system/expert/delete",this.checkIds)
          .then((response)=>{
            this.$refs['tableExt'].refreshTable();
          })
          .catch((error)=>{
            console.log(error);
          });
        this.checkIds = []
      },
      // 双击选中行，触发事件
      getRowData(data){
        this.addOrUpdateForm.sysStationId = data.id;
        this.addOrUpdateForm.sysStationName = data.stationName;
        this.addOrUpdateForm.companyId = data.companyId;
        this.addOrUpdateForm.companyCode = data.companyCode;
        this.addOrUpdateForm.companyName = data.companyName;
        this.addOrUpdateForm.deptName = data.deptName;
      },
    }
  }
</script>